<template>
  <div class="pic-bg password">
    <div class="password-wrap">
      <h1>同福智慧零售系统</h1>
      <h2>找回密码</h2>
      <Form ref="formItem" :model="formItem" :rules="formRules" :label-width="100">
        <FormItem label="注册手机号" prop="linkMobile">
          <Input type="text" v-model="formItem.linkMobile" placeholder="请输入注册手机号" />
        </FormItem>
        <FormItem label="新密码" prop="newPass">
          <Input type="password" v-model="formItem.newPass" placeholder="请输入新密码" />
        </FormItem>
        <FormItem label="确认密码" prop="newPass2">
          <Input type="password" v-model="formItem.newPass2" placeholder="请再次输入新密码" />
        </FormItem>
         <FormItem label="验证码" prop="codeImg" >
          <Input v-model="formItem.codeImg" placeholder="请填写图形验证码" style="width:200px;"></Input>
          <Button style="padding:0;height:32px;margin-left:15px;">
            <img :src="formItem.imgSrc" class="codeImg" @click="getVodeImg">
          </Button>
        </FormItem>
        <FormItem label="验证码" prop="verifyCode">
          <Input
            type="text"
            style="flex:1; margin-right:10px;"
            :maxlength=6
            v-model="formItem.verifyCode"
            placeholder="请输入短信验证码"
          />
          <Button type="primary" :disabled="isShow" @click="codeBtn()">{{refreshTitle}}</Button>
        </FormItem>
        <FormItem>
          <Button class="mr-20" type="primary" style="width:400px;margin:0;" :loading="resetLoading" @click="okBtn()">重置密码</Button>
        </FormItem>
        <FormItem>
          <div class="back-login" @click="goLogin()">返回登录</div>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { userResetPwd } from '@/api/storeUser';
import { getVerifyCode,verifyCode } from "@/api/storeInfo";
export default {
  data() {
    const validatelNewPass2 = (rule, value, callback) => {
      let newPass = this.formItem.newPass;
      if (value === "") {
        callback(new Error("确认密码不能为空"));
      } else if (value !== newPass) {
        callback(new Error("密码不一致"));
      } else {
        callback();
      }
    };
    return {
      imageId: "",
      imgCode: "",
      timer: null,
      isShow: false,
      resetLoading: false,
      refreshTitle: "获取验证码",
      countdown: 60,
      formItem: {
        linkMobile: "",
        newPass: "",
        newPass2: "",
        verifyCode: "",
        codeImg: "",// 图形验证码
        imgSrc: ''// 图形验证码的图片路径
      },
      formRules: {
        linkMobile: [{ required: true,message: "手机号不能为空",trigger: "blur" }],
        newPass: [{ required: true,message: "新密码不能为空",trigger: "blur" }],
        newPass2: [{ required: true,validator: validatelNewPass2,trigger: "blur" }],
        verifyCode: [{ required: true,message: "验证码不能为空",trigger: "blur" }],
        codeImg: [{ required: true, message: "图形验证码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    init() {
      this.getVodeImg();
    },
    // 获取验证码
    codeBtn() {
      let myreg = /^1[345789]\d{9}$/;
      let linkMobile = this.formItem.linkMobile;
      if (myreg.test(linkMobile)) {
        this.verifyCode();
      } else {
        this.$Message.error("请填写正确的手机号");
      }
    },
    getVodeImg() {
      this.getVerifyCode();
    },
    goLogin() {
      this.$router.push({
        name: "login"
      });
    },
    okBtn() {
      this.$refs['formItem'].validate(valid => {
        if (valid) {
          this.resetPwd();
        } else {
          this.$Message.error("请填写完整！");
        }
      });
    },
    settime() {
      if (!this.timer) {
        this.countdown = 60;
        this.timer = setInterval(() => {
          if (this.countdown > 0 && this.countdown <= 60) {
            this.countdown--;
            this.refreshTitle = "倒计时(" + this.countdown + "s)";
            this.isShow = true;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.isShow = false;
            this.refreshTitle = "获取验证码";
          }
        }, 1000);
      }
    },
    // 发送短信验证码
    async verifyCode() {
      let mobile = this.formItem.linkMobile;
      let item = {
        codeType: 2,// 验证码类型：1注册门店 2重置密码 ,
        imgId: this.imageId,
        imgCode: this.formItem.codeImg,
        phone: this.formItem.linkMobile// 手机号
      }
      const { data, status } = await verifyCode(item);
      if (data.code == 200 && status == 200) {
        this.settime();
        this.$Message.success("发送成功！");
      } else {
        this.$Message.error(data.message);
      }
    },
    // 图形验证码
    async getVerifyCode() {
      const { data, status } = await getVerifyCode();
      if (data.code == 200 && status == 200) {
        this.formItem.imgSrc = "data:image/png;base64," + data.data.content;
        this.imageId = data.data.imageId;
        this.imgCode = "";
      }
    },
    // 重置密码
    async resetPwd() {
      this.resetLoading = true;
      const item = {
        phone: this.formItem.linkMobile,
        password: this.formItem.newPass,
        verifyCode: this.formItem.verifyCode
      };
      const { data, status } = await userResetPwd(item);
      if (data.code == 200 && status == 200) {
        this.goLogin();
        this.$Message.success("密码重置成功！");
      } else {
        this.$Message.error(data.message);
      }
      this.resetLoading = false;
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
h1 {
  margin: auto;
  font-size: 24px;
  color: #333;
  text-align: center;
}
h2 {
  border-bottom: 1px solid #d2d2d2;
  margin: 10px 0 15px 0;
  padding-bottom: 15px;
  font-size: 16px;
  text-align: center;
}
.pic-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../../assets/images/regbg.png");
  background-size: 100%;
}
.password-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  width: 450px;
  margin: auto;
  padding: 30px 30px 0 30px;
}
.ivu-form-item-content {
  display: flex;
}
.mr-20 {
  margin-right: 20px;
}
.back-login {
  width: 100%;
  color: blue;
  text-align: right;
  font-size: 15px;
}
.back-login:hover {
  color: red;
  cursor: pointer;
  text-decoration: underline;
}
.codeImg {
  border: 1px solid #ffffff;
  cursor: pointer;
}
</style>
